<template>
    <div class="m-chatlist">
        <div class="chat-top">
            <p>对话开始于：{{beginTime}}</p>
            <p>访客{{vid}}的对话类型为：点击图标</p>
        </div>
        <div class="chat-content">
            <div class="chat-msg" v-for='item in chatlist' :class="{'visitor':item.from == 'visitor','server': item.from == 'server'}" >
                <span class="name">{{ item.from == 'visitor' ? '访客' + item.name : item.name }}</span>
                <span class="datetime">{{item.datetime}}</span>
                <p class="msg">{{item.msg}}</p>
            </div>
        </div>
        <div class="chat-end">
            <p>与访客{{vid}}的对话结束于{{endTime}}</p>
        </div>
    </div>
</template>
<script>
export default {
    name: 'ChatList',
    data () {
        return {
            beginTime: '2018-07-09 10:00:00',
            endTime: '2018-07-09 10:30:00',
            vid: 'v125650',//访客id
            chatType: '点击图标',
            chatlist:[{
                'name': 'jack wu',
                'datetime': '10:50:20',
                'msgType': 'txt',
                'msg': '粉红色发票是否害怕粉红色发票是否害怕粉红色发票是否害怕',
                'from': 'server',
                'to': 'visitor'
            },{
                'name': 'v65656',
                'datetime': '10:50:20',
                'msgType': 'txt',
                'msg': 'gsdgsdg',
                'from': 'visitor',
                'to': 'server'
            },{
                'name': 'v65656',
                'datetime': '10:50:20',
                'msgType': 'txt',
                'msg': 'gsdgsdg',
                'from': 'visitor',
                'to': 'server'
            },{
                'name': 'v65656',
                'datetime': '10:50:20',
                'msgType': 'txt',
                'msg': 'gsdgsdg',
                'from': 'visitor',
                'to': 'server'
            },{
                'name': 'v65656',
                'datetime': '10:50:20',
                'msgType': 'txt',
                'msg': 'gsdgsdg',
                'from': 'visitor',
                'to': 'server'
            },{
                'name': 'v65656',
                'datetime': '10:50:20',
                'msgType': 'txt',
                'msg': 'gsdgsdg',
                'from': 'visitor',
                'to': 'server'
            },{
                'name': 'v65656',
                'datetime': '10:50:20',
                'msgType': 'txt',
                'msg': 'gsdgsdg',
                'from': 'visitor',
                'to': 'server'
            },{
                'name': 'v65656',
                'datetime': '10:50:20',
                'msgType': 'txt',
                'msg': 'gsdgsdg',
                'from': 'visitor',
                'to': 'server'
            },{
                'name': 'v65656',
                'datetime': '10:50:20',
                'msgType': 'txt',
                'msg': 'gsdgsdg',
                'from': 'visitor',
                'to': 'server'
            },{
                'name': 'v65656',
                'datetime': '10:50:20',
                'msgType': 'txt',
                'msg': 'gsdgsdg',
                'from': 'visitor',
                'to': 'server'
            },{
                'name': 'v65656',
                'datetime': '10:50:20',
                'msgType': 'txt',
                'msg': 'gsdgsdg',
                'from': 'visitor',
                'to': 'server'
            },{
                'name': 'v65656',
                'datetime': '10:50:20',
                'msgType': 'txt',
                'msg': 'gsdgsdg',
                'from': 'visitor',
                'to': 'server'
            },{
                'name': 'v65656',
                'datetime': '10:50:20',
                'msgType': 'txt',
                'msg': 'gsdgsdg',
                'from': 'visitor',
                'to': 'server'
            },{
                'name': 'v65656',
                'datetime': '10:50:20',
                'msgType': 'txt',
                'msg': 'gsdgsdg',
                'from': 'visitor',
                'to': 'server'
            },{
                'name': 'v65656',
                'datetime': '10:50:20',
                'msgType': 'txt',
                'msg': 'gsdgsdg',
                'from': 'visitor',
                'to': 'server'
            },{
                'name': 'v65656',
                'datetime': '10:50:20',
                'msgType': 'txt',
                'msg': 'gsdgsdg',
                'from': 'visitor',
                'to': 'server'
            },{
                'name': 'v65656',
                'datetime': '10:50:20',
                'msgType': 'txt',
                'msg': 'gsdgsdg',
                'from': 'visitor',
                'to': 'server'
            },{
                'name': 'v65656',
                'datetime': '10:50:20',
                'msgType': 'txt',
                'msg': 'gsdgsdg',
                'from': 'visitor',
                'to': 'server'
            }]
        }
    }   
}
</script>
<style scoped lang="scss">
    .m-chatlist {
        font-size: $fs_3;
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;

        .chat-top ,.chat-end{
            padding-left: 6px;
            color: $c_22;
            font-size: $fs_3;
        }

        .chat-content {
            padding-left: 6px;

            .chat-msg {

                .datetime {
                    color: $c_24;
                }

                &.visitor {
                    .name {
                        color: $c_25;
                    }
                }
                &.server {
                    .name {
                        color: $c_23;
                    }
                }
                .msg {
                    text-indent: 16px;
                }
            }
        }

        .chat-end {
            border-bottom: solid 1px $c_26;
        }
    }
</style>
